<script setup>
import { ref } from 'vue'
import { http } from "@/api";
import { useRoute } from 'vue-router'
import BackButton from "@/components/BackButton.vue";
const details = ref({})
const route = useRoute()
const id = route.params.id
function getDetail() {
  http.news.read(id).then(res => {
    details.value = res.data
  })
}
if (id) {
  getDetail()
}
</script>

<template>
  <div class="industryInfo-detail f-c j-b">
    <div class="detail-main f-r j-b">
      <div class="detail-right" >
        <BackButton />
        <div class="detail-right-title">{{ details.name }}</div>
        <div class="detail-content" v-html="details.content"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.industryInfo-detail {
  background-color: #FFFFFF;
  flex-grow: 1;
  .detail-main {
    width: 100%;
    margin: 70px auto;
    .detail-right {
      flex-grow: 1;
      padding: 0 90px;
      .detail-right-title {
        padding-bottom: 50px;
        text-align: center;
        font-family: PingFang SC;
        font-size: 34px;
        font-weight: normal;
        line-height: 34px;
        color: #3D3D3D;
      }
    }
  }
}
</style>